<style scoped>
.wraper {
    padding: 0 30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
    height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 

/* 分页 end */




</style>
<style>
.nopass{
    color: #ed3f14;
}
.pass{
    color: #19be6b;
}
.hold{
    color: #ff9900;
}

/* 自定义modal start */
.team .ivu-modal-body {
    padding: 0px;
    background-color: #fff;
}

.team .ivu-modal-content:after {
    content: '';
    display: block;
    clear: both;
}

.team .ivu-modal-content {
    zoom: 1;
    background-color: #cfeaf8;
}

.team .ivu-modal-body {
    float: left;
    width: 67%;
    padding: 10px;
}

.team .ivu-modal-footer {
    float: left;
    width: 33%;
    text-align: center;
    padding: 0 14px;
}

.team .check-info, .team .promote-info{
    margin-bottom: 10px;
    position: relative;
    min-height:195px;
}

.team .check-standard .info .title {
    width: 7.7%;
    height: 100%;
    background-color: #4074e1;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0; 
    overflow: hidden;
    padding-top: 5%;
    /* padding-top: 48px; */
}

.team .check-standard .promote-info.info .title {
    /* height: 425px; */
    /* padding-top: 150px; */
}

.title-div{
    /* top:50%;
    transform:translateY(50%); */
}

.team .check-standard .info .content {
    width: 92.3%;
}

.team .ivu-table-tbody {
    font-size: 12px;
}

.team .ivu-table-tbody td.condition {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
}

.team .ivu-table-header .condition {
    text-align: left;
    padding-left: 10px;
}

.team .ivu-table-header .ivu-table-column-center {
    background-color: #e4eaec;
    border-right: 1px solid #d6dfe2;
    border-bottom: 1px solid #d6dfe2;
}

.team .ivu-table-tbody .ivu-table-column-center {
    border-bottom: 1px solid #d6dfe2;
    border-bottom: 1px solid #d6dfe2;
}

.team .current-analyze {
    text-align: left;
    margin-bottom: 45px;
}

.team .current-analyze h5 {
    font-size: 16px;
    font-weight: bold;
    line-height: 60px;
}

.team .current-analyze .ivu-col-span-12 {
    background-color: #fff;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    font-size: 12px;
}

.team .current-analyze .ivu-row {
    border-top: 1px solid #cfeaf8;
}

.team .current-analyze .ivu-row:first-child {
    border-top: none;
}

.team .current-analyze .ivu-col-span-12:first-child {
    border-right: 1px solid #cfeaf8;
    font-weight: bold;
}

.team .current-analyze .c1 {
    color: #ff855f;
}

.team .current-analyze .c2 {
    color: #08c111;
}
</style>



<template>
    <div class="employee-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="search">
                <Row>
                    <h3 class="search-h3 huang" >
                        快速搜索
                    </h3>
                    <Form  :model="searchForm" class="search-form">
                        <Col :xs="24" :sm="12" :md="12" :lg="5">
                            <Form-item>
                                <Input v-model="searchForm.name" placeholder="请输入代理人姓名" style="width: 140px"></Input>
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="5">
                            <Form-item>
                                <Input v-model="searchForm.job_code" placeholder="请输入代理人工号" style="width: 140px"></Input>
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="4">
                            <Form-item>
                                <Select v-model="searchForm.rank" style="width:140px" placeholder='请选择级别'>
                                    <Option value="0" >全部</Option>
                                    <Option :value="item.id" v-for="item in rankList" :key="item.id" >{{item.name}}</Option>
                                </Select>
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="4">
                            <Form-item>
                                <Select v-model="searchForm.promote" style="width: 140px" placeholder='请选择晋升结果'>
                                    <Option value="0" >全部</Option>
                                    <Option value="1" >晋升</Option>
                                    <Option value="2" >未达到</Option>
                                </Select>
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="4">
                            <Form-item>
                                <Select v-model="searchForm.keep" style="width: 140px" placeholder='请选择维持结果'>
                                    <Option value="0" >全部</Option>
                                    <Option value="1" >维持</Option>
                                    <Option value="2" >降级</Option>
                                </Select>
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="2" >
                            <Form-item>
                                <Button @click='search'>查询</Button>
                            </Form-item>
                        </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="headline">
                                
                </div>
                <div class="clearfix">
                    <Table border stripe :columns="columns_employee" :data="data_employee"></Table>
                    <Row class="page fr">
                        <Col span="24">
                            <Page :total="employeeTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
        <Modal v-model="showAddModal" class-name="team" title="考核明细" width="1000">
            <div class="check-standard">
                <div class="check-info info clearfix" v-if="showCheck">
                    <div class="title fl">
                        <div class="title-div">维<br>持<br>考<br>核<br>信<br>息</div>
                    </div>
                    <div class="content fr">
                        <Table border :columns="columms_check" :data="data_check"></Table>
                    </div>
                </div>
                <div class="promote-info info clearfix" v-if="showPromote">
                    <div class="title fl">晋<br>升<br>考<br>核<br>信<br>息</div>
                    <div class="content fr">
                        <Table border :columns="columms_promote" :data="data_promote"></Table>
                    </div>
                </div>
            </div>
            <div slot="footer" class="check-result">
                <div class="current-analyze">
                    <h5>个人现状分析</h5>
                    <Row>
                        <Col span='12'>姓名</Col>
                        <Col span='12'>{{agent.name}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>工号</Col>
                        <Col span='12'>{{agent.job_code}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>当前级别</Col>
                        <Col span='12' class-name="c1">{{agent.rank}}</Col>
                    </Row>
                    <Row>
                        <Col span='12'>下一级别</Col>
                        <Col span='12' class-name="c1">{{agent.next_rank}}</Col>
                    </Row>
                    <!-- <Row>
                        <Col span='12'>考核数据统计时间</Col>
                        <Col span='12'>2017-7--2018-6</Col>
                    </Row>
                    <Row>
                        <Col span='12'>晋升达标</Col>
                        <Col span='12' class-name="c2">已满足条件</Col>
                    </Row> -->
                </div>
            </div>
        </Modal>


    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getAllEmployee} from '../../api/employee'
import { getRankList} from '../../api/rank'
import { getEmployeeList , getResult } from '../../api/basiclaw'
import { getCheck } from '../../api/common'

export default {
    data() {

        return {
            cou:-1,
            reachPromote:true, //是升还是降级
            checkModal:false,
            closeable: false,
            loading: true,
            page: 1,
            pagesize: 10,
            searchForm: {
                name: '',
                no: '',
                sex:'',
            },
            agent:{
                name:'',
                job_code:'',
                rank:'',
                next_rank:''
            },
            showAddModal: false,
            showPromote: true,
            showCheck:true,
            rankList: [
    
            ],
            roleList:[

            ],
            deptList:[

            ],
            employeeList:[

            ],
            employeeTotal: 0,
            columns_employee: [
                {
                    title: '工号',
                    key: 'job_code',
                    align: 'center',
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '职级',
                    key: 'rank',
                    align: 'center',
                },
                {
                    title: '晋升结果',
                    key: 'promote',
                    align: 'center',
                    render: (h, params) => {                                               
                        return h('div', {
                            props:{
                                className:"ces"
                            },
                            attrs:{
                                class:(params.row.promote == '未达到') ? 'nopass' :((params.row.promote == '晋升') ? 'pass' : '') ,
                            },
                            
                        },params.row.promote);
                        
                    }
                },
                {
                    title: '维持结果',
                    key: 'keep',
                    align: 'center',
                    render: (h, params) => {                                               
                        return h('div', {
                            props:{
                                className:"ces"
                            },
                            attrs:{
                                class:(params.row.keep == '降级') ? 'nopass' : ((params.row.keep == '维持') ? 'hold' :''),
                            },
                            
                        },params.row.keep);
                        
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small', 
                                    disabled:(this.data_employee[params.index].promote == '不考核' && this.data_employee[params.index].keep == '不考核') ? true : false                                 
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showAdd(params.row.eid)
                                        console.log(params)
                                    }
                                }
                            }, '详情'),                     
                        ]);
                    }
                },
            ],
            data_employee: [

            ],
            agentCurrent:{
            },
            columms_check: [
                {
                    title: '维持考核项目',
                    key: 'itme',
                    align: 'center',
                    className: 'condition'
                },
                {
                    title: '维持考核标准',
                    key: 'target',
                    align: 'center',
                },
                {
                    title: '已完成',
                    key: 'reach',
                    align: 'center',
                    width: 100,
                },
                {
                    title: '差额',
                    key: 'diff',
                    align: 'center',
                },
            ],
            data_check: [
                
            ],
            columms_promote: [
                {
                    title: '晋升考核项目',
                    key: 'itme',
                    align: 'center',
                    className: 'condition'
                },
                {
                    title: '晋升考核标准',
                    key: 'target',
                    align: 'center',
                },
                {
                    title: '已完成',
                    key: 'reach',
                    align: 'center',
                    width: 100,
                },
                {
                    title: '超额',
                    key: 'diff',
                    align: 'center',
                },
            ],
            data_promote: [
                
            ],

            nowdate:''
        }
    },
    components: {
        productTitle
    },
    created() {
        this.getList()
        this.getRank()      
    },
    methods: {
        // 搜索
        search() {
            this.getList()           
        },
        // 获取员工列表
        getList() {
            let _params = {
                'p': this.page,
                'pagesize': this.pagesize,
                'name': this.searchForm.name,
                'job_code': this.searchForm.job_code,
                'rank': this.searchForm.rank,
                'promote':this.searchForm.promote,
                'keep':this.searchForm.keep,
            }
            new Promise((resolve, reject) => {
                getEmployeeList(_params).then(response => {
                    console.log(response.data);
                    if (response.data.err == 0) {
                        this.data_employee = response.data.data.list;
                        this.employeeTotal = response.data.data.total;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

        //获取职级列表
        getRank() {
            new Promise((resolve, reject) => {
                getRankList().then(response => {
                    if (response.data.err == 0) {
                        this.rankList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

        // 页码改变
        pageChange(page) {
            this.page = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getList();
        },


        //打开modal
        showAdd(uid) {
            this.showAddModal = !this.showAddModal;
            let _params = {
                eid:uid
            }
            new Promise((resolve, reject) => {
                getResult(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        //this.getList();
                        this.agent.name = response.data.data.name
                        this.agent.job_code = response.data.data.job_code
                        this.agent.rank = response.data.data.rank
                        this.agent.next_rank = response.data.data.next_rank
                        this.data_check = response.data.data.keep.items
                        if(this.data_check.length == 0){
                            this.showCheck = false
                        }else{
                            this.showCheck = true 
                        }
                        this.data_promote = response.data.data.promote.items
                        if(this.data_promote.length == 0){
                            this.showPromote = false
                        }else{
                            this.showPromote = true
                        }
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

    }
}
</script>
